<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 id="h1">{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
</body>

</html>
<!-- 引入vue.js核心文件 -->
<script src="../lib/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',//指定vue实例的作用范围
        data: { // 用来vue实例定义一系列数据
            msg: "仵航"
        },
        methods: {
            abc() {
                console.log("1231")
            }
        },
        // 初始化阶段
        beforeCreate() {
            // 1.生命周期函数中第一个函数  这个函数他在执行vue实例的,仅仅完成了自身事件的绑定
            // 和生命周期函数的初始工作,这时候实例里还没有el,data,methods这些相关属性
            console.log(this.msg)
        },
        created() {
            // 2.生命周期中第二个函数,这个函数在执行的时候 Vue他的实例已经初始化了data和methods中的相关方法
            console.log(this.msg)

        },
        beforeMount() {
            // 3.生命周期中的第三个函数  这个函数在执行vue将el中指定范围作为模版翻译
            console.log("beforeMount" + document.getElementById("h1").innerText)
        },
        mounted() {
            //4.生命周期中的第四个函数,这个函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
            console.log("mounted" + document.getElementById("h1").innerText)
            // this.abc()
        },
        // 运行阶段
        beforeUpdate() {
            // 5.生命周期中的第5个函数 这个函数是data中数据发生变化时候执行,
            // 这个事件执行仅仅只是vue实例中data数据变化页面显示的仍然是原始数据
            console.log("beforeUpdate" + this.msg)
            console.log("beforeUpdate" + document.getElementById("h1").innerText)
        },
        updated() {
            //6.生命周期中的第6个函数 这个函数是data中数据发生变化时候执行
            //,页面中的数据已经和data中的数据保持一致
            console.log("updated" + this.msg)
            console.log("updated" + document.getElementById("h1").innerText)
        },

        //3销毁阶段
        beforeDestory() {
            // 7.生命周期的第7个函数  该函数执行的时候,vue中所有的数据  methods component都没有销毁
            console.log("执行了销毁前beforeDestory")

        },
        destoryed() {
            // 8.生命周期的第8个函数  该函数执行的时候,vue中实例彻底销毁
            console.log("执行了销毁后destoryed")
        }
    })
</script>